<template>
	<view class="forget">

		<view class="content">
			<view class="header">
				<image :src="logoImage" style="background-color: #031725;"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<view class="tips">{{$t('forget.tip')}}</view>
				<wInput v-model="userName" type="text" maxlength="11" :placeholder="$t('register.userName')"></wInput>
				<wInput v-model="password" type="password" maxlength="11" :placeholder="$t('forget.newPassword')" isShowPass></wInput>

				<wInput v-model="msgCode" type="number" maxlength="6" :placeholder="$t('msgCode.verCode')" isShowCode :codeText="$t('msgCode.getVerCode')" setTime="30"
				 ref="runCode" @setCode="getmsgCode()"></wInput>
			</view>

			<wButton :text="$t('forget.resetPassword')" :rotate="isRotate" @click.native="save()"></wButton>
			
			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="forget" open-type="navigate">{{$t('login.RetrievePassword')}}</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate">{{$t('login.register')}}</navigator>
			</view>

		</view>
	</view>
</template>

<script>
	var t;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	export default {
		data() {
			return {
				logoImage: '/static/logo.png',
				userName: "", //电话
				password: "", //密码
				msgCode: "", //验证码
				isRotate: false, //是否加载旋转
			}
		},
		components: {
			wInput,
			wButton
		},
		mounted() {
			t = this;
		},
		onLoad() {
			this.$i18n.locale = t.$common.localRead("local")
		},
		methods: {
			getmsgCode() {

				if (!t.userName || t.userName.length != 11) {
					this.$common.showToast(this.$t('register.passwordNotNull'))
					return false;
				}

				if (!t.password) {
					this.$common.showToast(this.$t('register.passwordNotNull'))
					return false;
				}


				let data = {
					userName: t.userName,
					password: t.password,
				}

				t.$fetch.request('userInfo/sendMsgForget', data, 'POST').then((res) => {
					if (res.code === 200) {
						this.$common.showToast(this.$t('msgCode.sendSuccess'))
						t.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）

					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})

			},
			save() {

				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.showAgree == false) {
					this.$common.showToast(this.$t('register.agreeRegisterAgreement'))
					return false;
				}
				
				if (this.userName.length != 11) {
					this.$common.showToast(this.$t('register.userNameErr'))
					return false;
				}
				
				if (!t.password) {
					this.$common.showToast(this.$t('register.passwordNotNull'))
					return false;
				}
				var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,20}');
				if (!pwdRegex.test(t.password)) {
					this.$common.showToast(this.$t('register.passwordErr'))
					return false;
				}
				
				if (!this.msgCode) {
					this.$common.showToast(this.$t('msgCode.msgCodeNotNull'))
					return false;
				}
				console.log("注册成功")
				t.isRotate = true
				setTimeout(function() {
					t.isRotate = false
				}, 3000)

				let data = {
					userName: t.userName.trim(),
					password: t.password.trim(),
					msgCode: t.msgCode.trim(),
				}

				t.$fetch.request('userInfo/forgetPassword', data, "POST").then((res) => {
					console.info(res)
					if (res.code == 200) {
						$common.showToast(t.$t('tip.operationSuccess'), 1);
						setTimeout(function() {
							$common.toPage(t.$base.pagePath().login.login)
						}, 2000)

					} else {
						$common.showToast(res.msg);
						t.isRotate = false
					}
				}).catch((e) => {})

			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	.main-list {
		color: #E6EEFF;
		background-color: #172434;
	}

	.uni-input-placeholder {
		color: var(--et_font);
	}

	.msgCode {
		color: rgb(237, 180, 59);
	}
	input{
		color: #E6EEFF !important;
	}
</style>
